<template>
    <div style="background-color: white">
        <van-list
                v-model="loading"
                :finished="finished"
                finished-text="没有更多了"
                @load="onLoad"
        >
            <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                <div style="padding-top: 10px">
                    <img style="width: 70px;height: 70px;border-radius: 50px"
                         src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic2.zhimg.com%2F50%2Fv2-99dbc76ccf938ba12e551f08860f438b_hd.jpg&refer=http%3A%2F%2Fpic2.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628303779&t=0ea032db1d5de4349474f43c202aefa9">
                    <p><span @click="login">{{msg}}</span></p>
                </div>
                <div style="height: 100px;align-content: center">
                    <van-grid :gutter="6" style="padding-left: 70px;border: white none">
                        <van-grid-item icon="minus" icon-color="gray" text="动态" style="padding-left: 20px"/>
                        <van-grid-item icon="minus" icon-color="gray" text="关注"/>
                        <van-grid-item icon="minus" icon-color="gray" text="粉丝"/>
                    </van-grid>
                </div>
                <div class="btn1">
                    <span style="font-weight: bold">开通大会员</span><br>
                    <van-icon style="float: right;padding-bottom: 20px;padding-right: 16px;color: hotpink"
                              name="arrow"/>
                    <p>
                        <span style="font-size: 10px;padding-top: 0;padding-left: 14px">了解更多权益</span>
                    </p>
                    <!--            <van-button type="warning" size="large">注册会员</van-button>-->
                </div>
                <div class="btn2">
                    <van-grid>
                        <van-grid-item icon="coupon-o" icon-color="blue" text="离线缓存"/>
                        <van-grid-item icon="replay" icon-color="blue" text="历史记录"/>
                        <van-grid-item icon="star-o" icon-color="blue" text="我的收藏"/>
                        <van-grid-item icon="tv-o" icon-color="blue" text="稍后再看"/>
                    </van-grid>
                </div>
                <div>
                    <h5 style="text-align: left;height: 8px;padding-left: 10px">推荐服务</h5>
                    <van-grid>
                        <van-grid-item icon="coupon-o" icon-color="pink" text="我的钱包"/>
                        <van-grid-item icon="music-o" icon-color="pink" text="听个音乐" @click="music"/>
                        <van-grid-item icon="replay" icon-color="pink" text="上传视频" @click="Uploader"/>
                        <van-grid-item icon="star-o" icon-color="pink" text="个性装扮"/>
                        <van-grid-item icon="tv-o" icon-color="pink" text="邀请好友转红包"/>
                        <van-grid-item icon="replay" icon-color="pink" text="会员购中心"/>
                        <van-grid-item icon="star-o" icon-color="pink" text="反馈论坛"/>
                        <van-grid-item icon="tv-o" icon-color="pink" text="充值福利"/>
                    </van-grid>
                </div>
                <div>
                    <h5 style="text-align: left;height: 8px">更多服务</h5>
                    <van-cell-group inset>
                        <van-cell icon="service-o" title="联系客服" is-link></van-cell>
                        <van-cell icon="setting-o" title="设置" is-link to="set"/>
                        <van-cell icon="service-o" title="课堂模式" is-link></van-cell>
                        <van-cell icon="calendar-o" title="课堂模式" is-link></van-cell>
                    </van-cell-group>
                </div>
            </van-pull-refresh>
        </van-list>
    </div>
    <NavBar/>
</template>

<script>

    import NavBar from "../components/NavBar";

    export default {
        name: "my",//我的
        components: {
            NavBar
        },
        data() {
            return {
                isLoading: false,
                loading: false,
                finished: false,
                msg:"点击登录",
            };
        },
        methods: {
            login() {
                this.$router.push("Login")
            },
            onRefresh() {
                setTimeout(() => {
                    this.$toast('刷新成功');
                    this.isLoading = false;
                }, 1000);
            }, onLoad() {
                // 异步更新数据
                // setTimeout 仅做示例，真实场景中一般为 ajax 请求
                setTimeout(() => {
                    // for (let i = 0; i < 10; i++) {
                    //     this.widows.push(this.widows.length + 1);
                    // }
                    // 加载状态结束
                    this.loading = false;
                    // // 数据全部加载完成
                    // if (this.widows.length >= 40) {
                    //     this.finished = true;
                    //
                    // }
                    // this.$toast('没有更多了');
                    this.$toast('加载成功');
                }, 1000);
            },
            Uploader(){
                this.$router.push("VideoAdd")
            },
            music(){
                this.$router.push("Music")
            }
        }
    }
</script>

<style scoped>
    .custom-image .van-empty__image {
        width: 90px;
        height: 90px;
    }

    .btn1 {
        margin-left: 14px;
        width: 92%;
        height: 63px;
        background-color: pink;
        border-radius: 8px;
    }

    .btn2 {
        margin-left: 14px;
        width: 92%;
        height: 83px;
    }

    .btn1 span {
        font-size: 18px;
        color: hotpink;
        float: left;
        padding-left: 8px;
        padding-top: 3px;
    }
</style>